<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from 'vue'
//引入返回上一页icon
import iconBackto from '@/components/icon-backto/index.vue'
import { onLoad } from '@dcloudio/uni-app'
//引入api
import { doGetOrderInfo } from '@/apis/order/index'
//引入类型
import { DISTRIBUTION, OrderDetailProps } from '../type'
import areaShow from '@/components/area-show/area-show.vue'

type PLATFORM = 'WECHAT_MINI_APP' | 'WECHAT_MP' | 'PC' | 'H5' | 'IOS' | 'ANDROID' | 'HARMONY'

const platformIconMap: Record<PLATFORM, string> = {
    WECHAT_MINI_APP: 'icon-xiaochengxu',
    WECHAT_MP: 'icon-weixin',
    H5: 'icon-shouji2',
    IOS: 'icon-iOS',
    PC: 'icon-zhuomian-diannaoxianshiqi',
    ANDROID: 'icon-anzhuo',
    HARMONY: 'icon-huawei',
}

const distributionModeStatus: Record<keyof typeof DISTRIBUTION, string> = {
    MERCHANT: '快递配送',
    EXPRESS: '快递配送',
    INTRA_CITY_DISTRIBUTION: '同城配送',
    SHOP_STORE: '门店自提',
    VIRTUAL: '无需物流',
}

//存储路由传递过来的参数
const pathOrderInfo = ref({
    orderNo: '',
    shopId: '',
    packageId: '',
})
//存储订单详情
const info = ref<OrderDetailProps>({} as OrderDetailProps)
const infoStatus = ref('')
//待发货枚举
enum status {
    UNPAID,
    PAID,
    BUYER_CLOSED,
    SYSTEM_CLOSED,
    SELLER_CLOSED,
}
onLoad(async (RES: any) => {
    uni.$emit('updateTitle')
    console.log('onLoad', RES)
    const { orderNo, shopId, packageId, listname } = RES
    infoStatus.value = listname
    pathOrderInfo.value = {
        orderNo,
        shopId: shopId || '',
        packageId: packageId || '',
    }
    handlegetOrderInfo()
})

/**
 * 获取订单详情
 */
const handlegetOrderInfo = async () => {
    const { orderNo, shopId, packageId } = pathOrderInfo.value
    const { code, data } = await doGetOrderInfo(orderNo, shopId, packageId)
    if (code !== 200) return uni.showToast({ title: '获取订单详情失败', icon: 'none' })
    console.log('data', data)
    info.value = data
    // initRemark(data.shopOrders[0].remark)
    // orderDetailsConfig.value = getOrderDetailsConfig(data)
    // if (whetherTheDelivery(data)) {
    //     initFirstDeliveryPage(data)
    // }
}
enum payType {
    BALANCE = '余额',
    WECHAT = '微信',
    ALIPAY = '支付宝',
}
</script>

<template>
    <view class="content">
        <view class="content__top">
            <icon-backto></icon-backto>
            <view style="height: 20rpx"> </view>
        </view>
        <scroll-view class="content__bottom" :scroll-y="true">
            <view class="bottom-box">
                <!-- 头部待发货 -->
                <view class="hearder">
                    <view style="font-size: 40rpx">{{ infoStatus }}</view>
                    <view>
                        <u-icon name="shangpinweigui" custom-prefix="icon" class="iconfont" size="120" color="##fff"></u-icon>
                    </view>
                    <q-icon
                        color="#fff"
                        :name="platformIconMap[info.platform as PLATFORM]"
                        size="46rpx"
                        style="position: absolute; right: 0; bottom: 0"
                    ></q-icon>
                </view>
                <!-- 物流信息详情 -->
                <view class="detail">
                    <view style="margin-right: 10rpx">
                        <u-icon name="car" size="40" color="black"></u-icon>
                    </view>
                    <view class="detail__center">
                        <view style="font-size: 30rpx; margin-bottom: 5rpx">收货人：{{ info.orderReceiver?.name }}</view>
                        <view class="textone"
                            >取货地址：
                            <area-show :areacode="info.orderReceiver?.areaCode"></area-show>
                        </view>
                    </view>
                    <view style="width: 200rpx">
                        <view style="font-size: 30rpx; color: #ccc">{{ info.orderReceiver?.mobile }}</view>
                    </view>
                </view>
                <!-- 订单详情 -->
                <template v-for="item in info.shopOrders" :key="item">
                    <view class="order">
                        <view class="order__top">
                            <u-avatar :src="item.shopLogo" :size="40"></u-avatar>
                            <view style="font-weight: 700; margin: 0 20rpx">{{ item.shopName }}</view>
                            <u-icon name="arrow-right" color="black" size="12"></u-icon>
                        </view>
                        <template v-for="t in item.shopOrderItems" :key="t">
                            <view class="order__center">
                                <view class="order__center--main">
                                    <u-avatar :src="t.image" mode="square" :size="200"></u-avatar>
                                    <view class="order__center--mainbottom">
                                        <view class="order__center--maintext">{{ t.productName }}</view>
                                        <view class="order__center--mainspec">
                                            <template v-if="t.specs"
                                                ><view>{{ t.specs.join(';') }}</view></template
                                            >
                                            <view>x{{ t.num }} </view>
                                        </view>
                                        <view class="order__center--mainprice"> ¥{{ (Number(t.dealPrice) / 10000).toFixed(2) }} </view>
                                    </view>
                                </view>
                            </view>
                        </template>
                    </view>
                </template>
                <view class="price">
                    <view class="price__text">
                        <view>优惠</view>
                        <view>{{ (Number(info.orderPayment?.discountAmount) / 10000).toFixed(2) }}</view>
                    </view>
                    <view class="price__text">
                        <view>支付总金额</view>
                        <view>{{ (Number(info.orderPayment?.payAmount) / 10000).toFixed(2) }}</view>
                    </view>
                </view>
                <view class="bottom">
                    <view class="bottom__text">配送方式: {{ distributionModeStatus[info.extra?.distributionMode] }}</view>
                    <view class="bottom__text">订单编号：{{ info.no }}</view>
                    <view class="bottom__text">支付方式：{{ payType[info.orderPayment?.type] }}</view>
                    <view class="bottom__text">创建时间:{{ info.orderPayment?.payTime }}</view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>
<style lang="scss" scoped>
@include b(content) {
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0 20rpx;
    @include e(top) {
        margin-top: 72rpx;
        height: 110rpx;
        display: flex;
        flex-direction: column;
    }
    @include e(bottom) {
        height: 1172rpx;
    }
}
@include b(bottom-box) {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
}
@include b(hearder) {
    height: 320rpx;
    width: 100%;
    background-color: #4755e9;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 10rpx;
    margin-bottom: 10rpx;
    position: relative;
}
@include b(textone) {
    font-size: 26rpx;
    color: #ccc;
    line-height: 30rpx;
}
@include b(detail) {
    border-radius: 10rpx;

    height: 144rpx;
    width: 100%;
    display: flex;
    color: black;
    background-color: #fff;
    padding: 20rpx;
    margin-bottom: 10rpx;
    @include e(center) {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
    }
}

@include b(order) {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: black;
    background-color: #fff;
    margin-bottom: 10rpx;
    border-radius: 10rpx;

    @include e(top) {
        display: flex;
        width: 100%;
        justify-content: flex-start;
        align-items: center;
        height: 90rpx;
        padding: 0 20rpx;
    }
    @include e(center) {
        display: flex;
        flex-direction: column;
        flex: 1;
        width: 100%;
        padding: 20rpx;
        @include m(main) {
            display: flex;
        }
        @include m(mainbottom) {
            display: flex;
            width: 100%;
            flex-direction: column;
            margin-left: 20rpx;
        }
        @include m(maintext) {
            font-size: 28rpx;
            height: 76rpx;
            //超过两行显示省略号
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            margin-bottom: 20rpx;
        }
        @include m(mainspec) {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 32rpx;
            font-size: 24rpx;
            color: #ccc;
            margin-bottom: 20rpx;
        }
        @include m(mainprice) {
            font-size: 30rpx;
            font-weight: 700;
        }
    }
}

@include b(price) {
    border-radius: 10rpx;

    height: 200rpx;
    width: 100%;
    display: flex;
    flex-direction: column;
    color: black;
    background-color: #fff;
    margin-bottom: 10rpx;
    padding: 20rpx;
    @include e(text) {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 80rpx;
        font-size: 28rpx;
        line-height: 80rpx;
    }
}

@include b(bottom) {
    border-radius: 10rpx;

    height: 250rpx;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: #ccc;
    background-color: #fff;
    margin-bottom: 10rpx;
    padding: 40rpx 20rpx;
    @include e(text) {
        margin-bottom: 10rpx;
    }
}
</style>
